<template>
  <div>
    <van-popup lazy-render v-model:show="showLoginRight" position="right" :style="{ width: '270px', height: '100%' }">
      <template #default>
        <!--        根据登录与否 显示不同的内容-->
        <AlreadyLoginContent v-if="isLogin" :showLoginRight="showLoginRight" @changeShowStatus="changeShowStatus" />
        <LoginRightContent v-else :showLoginRight="showLoginRight" @changeShowStatus="changeShowStatus" />
      </template>
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import LoginRightContent from '~/components/login/LoginRightContent.vue'
import AlreadyLoginContent from '~/components/login/AlreadyLoginContent.vue'
import { useMemberStore } from '~/store/member'

const memberStore = useMemberStore()
const { memberInfo, isLogin } = storeToRefs(memberStore)
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
const showLoginRight = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  },
})

const changeShowStatus = (val: boolean) => {
  showLoginRight.value = val
}
</script>

<style scoped lang="scss">
:deep(.van-popup) {
  background-color: #31383b;
}
</style>
